
import { useDispatch, useSelector } from 'react-redux'
import Header from '../common/Header'
import DepartDate from './DepartDate'
import HighSpeed from './HighSpeed'
import './Index.css'
import Journey from './Journey'
import Submit from './Submit'
import { storeType } from '../../store'
import { exchangeFromTo, fetchCityData, setCityData, setSelectedCity, showCitySelector } from '../../store/reducers/indexReducer'
import CitySelector from '../common/CitySelector'
import { useEffect } from 'react'
export default function Index() {


    const {
      from,
      to,
      isCitySelectorVisible,
      isDateSelectorVisible,
      cityData,
      isLoadingCityData,
      highSpeed,
      departDate,
    } = useSelector((state: storeType) => state.index);

    const dispatch = useDispatch()

    const back = () => {
        window.history.back();
    }

    // useEffect(() => {
    //     fetch('http://localhost:8002/rest/cities')
    //         .then(res => res.json())
    //         .then(cityData => {
    //             // console.log(cityData);
    //             setCityData(cityData.cityList)
    //         })
    // },[])

    return <div>
        <Header title='你好' onBack={back} />
        <form action="" className='form'>
            <Journey
                exchangeFromTo={() => dispatch(exchangeFromTo())}
                from={from}
                to={to}
                showCitySelector={() => dispatch(showCitySelector(true))}
            />
            <DepartDate />
            <HighSpeed />
            <Submit />
        </form>

        <CitySelector 
            show={isCitySelectorVisible}
            cityData={cityData}
            isLoading={isLoadingCityData}
            onBack={() => back()}
            fetchCityData={()=>fetchCityData()}
            onSelect={setSelectedCity}
        />
    </div>
}